<template>
  <view class="balance">
    <z-paging ref="paging" v-model="list" @query="queryList">
      <!-- 搜索框 -->
      <template #top>
        <view class="balance_top">
          <view class="bt_money">
            999.00
          </view>
          <view class="bt_explain">
            我的余额（元）
          </view>
          <view class="bt_chongzhi">
            充值
          </view>
          <view class="bt_tixian">
            提现
          </view>
        </view>
      </template>

      <view class="changStyle">
        <view class="changStyleBack">
          <uni-data-select class="selec" v-model="value" :localdata="range" @change="change"></uni-data-select>
        </view>
        <!-- 余额列表 -->
        <view class="ye_list" v-for="item in list">
          <image src="@/static/logo.png" mode="" class="icon"></image>
          <view class="type">
            {{item.name}}
          </view>
          <view class="money">
            ￥50.00
          </view>
          <view class="status">
            提现成功
          </view>
          <view class="time">
            2023-04-07 13:47:52
          </view>
          <view class="withdrawal t-ju-between">
            <span>提现到</span>
            <span>银行卡里</span>
          </view>
          <view class="initiationTime t-ju-between">
            <span>发起时间</span>
            <span>2023-04-07 13:49:17</span>
          </view>
          <view class="heng">

          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script setup>
  import {
    ref,
    reactive
  } from 'vue'
const paging = ref(null)
const parms = reactive({
  pageNo: 1,
  pageSize: 10
})

const list = ref([])
// v-model绑定的这个变量不要在分页请求结束中自己赋值，直接使用即可
// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.reload()即可
const queryList = (pageNo, pageSize) => {
  parms.pageNo = pageNo
  parms.pageSize = pageSize
  uni.showToast({
    title: '获取列表成功',
    icon: 'none'
  })
  paging.value.complete([{name: '微信'},
  {name: '支付宝'},
  {name: '微信'},
  {name: '微信'},
  {name: '微信'},
  {name: '微信'},
  {name: '微信'},
  {name: '微信'},
  {name: '微信'},
 ]);
  // 此处请求仅为演示，请替换为自己项目中的请求
  // getList(parms).then(res => {
  //   if (res.success) {
  //     list.value = list.value.concat(res.result.records)
      
  //   }
  // })
}
  const value = ref(0)
  const range = ref([{
      value: 0,
      text: "篮球"
    },
    {
      value: 1,
      text: "足球"
    },
    {
      value: 2,
      text: "游泳"
    },
  ])
  const change = (e) => {
    console.log(e, 'adsd');
  }
</script>

<style lang="scss">
  .balance {
    .balance_top {
      position: relative;
      top: 5rpx;
      width: 100%;
      height: 250rpx;
      background-color: #fff;

      .bt_money {
        position: absolute;
        top: 40rpx;
        left: 30rpx;
        font-size: 24rpx;
      }

      .bt_explain {
        position: absolute;
        top: 140rpx;
        left: 30rpx;
        font-size: 24rpx;
      }

      .bt_chongzhi,
      .bt_tixian {
        position: absolute;
        top: 140rpx;
        padding: 6rpx 30rpx;
        background-color: #555555;
        color: #fff;
        text-align: center;
        border-radius: 8rpx;
        font-size: 24rpx;
      }

      .bt_chongzhi {
        right: 170rpx;
      }

      .bt_tixian {
        right: 40rpx;
      }
    }

    .changStyle {
      position: relative;
      top: 10rpx;

      // background-color: #fff;
      .changStyleBack {
        width: 100%;
        background-color: #fff;
      }

      .selec {
        width: 200rpx;
      }

      .ye_list {
        background-color: #fff;
        position: relative;
        margin-bottom: 20rpx;
        width: 100%;
        height: 250rpx;

        .icon {
          position: absolute;
          top: 15rpx;
          left: 35rpx;
          width: 50rpx;
          height: 50rpx;
          border-radius: 50%;
        }

        .type {
          position: absolute;
          top: 20rpx;
          left: 95rpx;
          font-size: 24rpx;
        }

        .money {
          position: absolute;
          top: 20rpx;
          right: 25rpx;
          font-size: 24rpx;
        }

        .status {
          position: absolute;
          top: 70rpx;
          left: 50%;
          transform: translateX(-50%);
          font-size: 24rpx;
        }

        .time {
          position: absolute;
          top: 110rpx;
          left: 50%;
          transform: translateX(-50%);
        }

        .heng {
          position: absolute;
          top: 185rpx;
          left: 50%;
          transform: translateX(-50%);
          width: 90%;
          border-bottom: 2rpx solid #F2F2F2;
        }

        .withdrawal {
          position: absolute;
          top: 140rpx;
          width: 100%;
          padding: 0 30rpx;
        }

        .initiationTime {
          position: absolute;
          top: 190rpx;
          padding: 0 30rpx;
          width: 100%;

        }
      }

    }
  }
</style>